<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="content-tab-bar">
			<u-icon name="arrow-leftward" @click="returns" size="25"></u-icon>
			<text>手机号登录</text>
		</view>
		<!-- 提示字体 -->
		<view class="content-message">
			<text class="content-message-tit1">登录体验更多精彩</text>
			<text class="content-message-tit2">未注册手机登录后将自动创建账号</text>
		</view>

		<!-- 登录按钮 -->
		<view class="content-login">
			<u--form>
				<u-form-item type="number" label="手机">
					<u-input v-model:value="phone" :clearable="true" prefixIcon="phone" :focus="true" />
				</u-form-item>
				<u-form-item label="密码">
					<u-input type="password" v-model:value="pwd" prefixIcon="lock" />
				</u-form-item>
			</u--form>
		</view>

		<view class="content-enter">
			<u-button class="content-ente-btn" @tap="submits" :disabled="disabled" shape="circle">下一步</u-button>
		</view>
	</view>
</template>

<script>
import {
	Login
} from '@/http/users.js'
export default {
	data() {
		return {
			phone: "", //手机号码
			pwd: '', //密码
			disabled: false, //按钮禁用
		}
	},
	methods: {
		// 登录按钮请求
		async submits() {
		  // 预验证
		  if (!this.phone) {
		    uni.showToast({ title: '请输入手机号', icon: 'none' });
		    return;
		  }
		  if (!this.check.telphone(this.phone)) {
		    uni.showToast({ title: '手机号格式错误', icon: 'none' });
		    return;
		  }

		  try {
		    const res = await Login(this.phone, this.pwd);
		    if (res.code === 200) {
		      uni.showToast({ title: '登录成功', icon: 'success' });
		      uni.setStorageSync('token', res.data.token);
		      setTimeout(() => {
		        uni.switchTab({ url: '/pages/index/index' });
		      }, 1500);
		    } else {
		      const msg = res.message || '登录失败，请检查输入';
		      uni.showToast({ title: msg, icon: 'error' });
		    }
		  } catch (error) {
		    uni.showToast({ title: '网络请求失败', icon: 'none' });
		  }
		},


		// 回到上一页
		returns() {
			uni.navigateBack({
				data: 1
			})
		},
	}
}
</script>

<style lang="scss">
.content {
	// 导航条
	&-tab-bar {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		text {
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	}

	//提示字体
	&-message {
		display: flex;
		flex-direction: column;
		padding: 30px 30rpx;

		&-tit1 {
			font-size: 30rpx;
		}

		&-tit2 {
			font-size: 15rpx;
			color: #9c9c9c;
		}
	}

	// input和bottom
	&-login {
		// width: 100%;
		padding: 0 30rpx;
	}

	&-enter {
		width: 90%;
		margin: auto;
		margin-top: 50px;

		&-btn {
			border-radius: 20px;
			background-color: #fe3a3b;
			color: white;
		}
	}
}
</style>
